<template>
  <div>
    <!-- 轮播 -->
    <swiper :options="swiperOption">
      <swiper-slide><img class="w-100 h" src="../assets/images/轮播4.jpg"/></swiper-slide>
      <swiper-slide><img class="w-100 h" src="../assets/images/轮播5.jpg"/></swiper-slide>
      <swiper-slide><img class="w-100 h" src="../assets/images/轮播6.jpg"/></swiper-slide>
      <div class="swiper-pagination pagination-home" slot="pagination"></div>
    </swiper>
    <!-- 精彩视频 -->
    <div class="video bg-white px-3">
      <div class="d-flex mt-3 p-3 ai-center bottom-border">
        <div class="top-l flex-1">
          <i class="iconfont icon-video"></i>
          <span class="fs-xl ml-2"><strong>热门视频</strong></span>
        </div>
        <div class="top-r">
          <div class="nav">
            <div class="nav-item px-2" v-for="(item, i) in videlData" :key="i" :class="{active: active===i}" @click="active=i">
              <div class="nav-link" @click="$refs.list.swiper.slideTo(i)">{{item.date}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="px-1 v-body">
        <swiper ref="list" @slide-change="() => active = $refs.list.swiper.realIndex">
          <swiper-slide v-for="obj in videlData" :key="obj.date" :class="{packup: packUp === false}">
            <div v-for="(item, i) in obj.items" :key="i" class="d-flex bottom-border ai-center">
              <div v-if="i===0" class="d-flex py-2 px-1">
                <img :src="item.imgurl" class="img">
                <div class="ml-2">
                  <div class="text-dark-1" style="line-height: 1.7rem">{{item.title}}</div>
                  <div class="d-flex mt-2 ai-center">
                    <i class="iconfont icon-video"></i>
                    <span class="text-grey fs-xs ml-2">{{item.pageView}}</span>
                  </div>
                </div>
              </div>
              <div v-if="i>=1" class="d-flex px-1">
                <div class="flex-1 text-ellipsis text-dark-1 title">{{item.title}}</div>
                <div class="d-flex ai-center">
                  <i class="iconfont icon-video"></i>
                  <span class="text-grey fs-xs ml-2">{{item.pageView}}</span>
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="fs-sm text-dark-2 text-center py-2" @click="() => packUp = !packUp">{{packUp === true ? '收起' : '展开'}}榜单</div>
      </div>
    </div>

    <!-- 英雄攻略 -->
    <m-card icon="gonglve1" title="英雄攻略" plain>
      <div>
        <!-- 顶部 -->
        <div class="d-flex jc-between" v-if="heroData[0]">
          <div class="avatar d-flex flex-column" :class="{active: i===index1}" @click="index1 = i" v-for="(item,i) in heroData[0].heroList.slice(0,6)" :key="i">
            <img :src="item.avatar">
            <span class="span fs-xxs text-center">热门</span>
          </div>
          <div class="d-flex px-2 py-2 ai-center fs-xs bg-light-3 unfold" @click="packUp1 = !packUp1">
            {{packUp1 === false ? '展开' : '收起'}}
          </div>
        </div>
        <!-- 英雄分类模板  -->
        <div class="d-flex jc-around heroList ai-start" v-show="packUp1">
          <div class="d-flex flex-warp box" v-if="heroData[i]">
            <router-link :to="`/heroes/${item._id}`" tag="div" class="text-center m-2 box-son" v-for="(item,i) in heroData[i].heroList" :key="i">
              <img class="img" :src="item.avatar">
              <div>{{item.name}}</div>
            </router-link>
          </div>
          <div class="nav-f">
            <div v-for="(item,i) in heroData" :key="i" @click="assignment(i)"
             class="py-3 bg-light-3 d-flex jc-center text-center nav" :class="{active: index===i}">{{item.name}}</div>
          </div>
        </div>
        <!-- 热门英雄描述 -->
        <div class="fs-xs d-flex mt-3 py-2 bg-light-3 jc-between describe" v-if="heroData[0]">
          <div>
            <span>{{newslist[index1].name}}</span>
            <span>{{newslist[index1].categories[0].name}}</span>
            <span>登场排名 &nbsp;{{ranking}}</span>
            <span>胜率排名 &nbsp;{{ranking}}</span>
          </div>
          <router-link :to="`/heroes/${newslist[index1]._id}`" tag="div">查看英雄详细介绍 ></router-link>
        </div>
        <!-- 视频攻略 -->
        <div class="d-flex jc-between flex-warp mt-3 video1" v-if="videlData[0]">
          <div v-for="(item,i) in videlData[0].items.slice(0,4)" :key="i" class="my-1">
            <img :src="item.imgurl" class="img" width="200">
            <div class="title my-3">{{item.title}}</div>
            <div class="fs-xs text-grey">
              <i class="iconfont icon-video icon"></i>
              <span class="ml-1">{{item.pageView}}</span>
            </div>
          </div>
        </div>
      </div>
    </m-card>

    <!-- 图文攻略 -->
    <m-list-card icon="tushu" title="图文攻略" :categories="strategyData">
      <template #items="{item}">
        <router-link :to="`/strategy/${strategy._id}`" tag="div" 
        v-for="(strategy, i) in item.itemsArr" :key="i" class="d-flex strategy px-1 pb-3"
        >
          <img :src="strategy.img" class="img">
          <div class="ml-3">
            <p class="fs-lg">{{strategy.title}}</p>
            <div class="fs-xs text-grey mt-4">{{strategy.createdAt | date}}</div>
          </div>
        </router-link>
        <div class="fs-sm text-dark-2 text-center py-1 mt-2">点击加载更多</div>
      </template>
    </m-list-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  computed: {
    i() {
      return this.index
    },
    newslist() {
      return this.heroData[0].heroList.slice(0,6)
    },
    ranking() {
      return Math.floor(Math.random()*10+this.index1)
    }
  },
  filters: {
    date(val) {
      return dayjs(val).format('MM/DD')
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination"
        }
      },
      videlData: [],
      active: 0,
      packUp: true,
      heroData: [],
      strategyData: [],
      index: 0,
      index1: 0,
      packUp1: false
    }
  },
  methods: {
    async fetchVideo () {
      const res = await this.$http.get('/video')
      this.videlData = res.data
    },
    async fetchHeroData() {
      const res = await this.$http.get('/heroes/list')
      this.heroData = res.data
    },
    async fetchStrategy () {
      const res = await this.$http.get('/strategy')
      this.strategyData = res.data
    },
    assignment(i) {
      this.index = i
    }
  },
  created() {
    this.fetchVideo()
    this.fetchHeroData()
    this.fetchStrategy()
  },
}
</script>

<style lang="scss">
  .heroList {
    border: 0.0625rem solid #ccc;
    height: 22.35rem;
    overflow-y: auto;
    background-color: #fff;
    z-index: 999;
    position: absolute;
    .img {
      width: 3.9rem;
    }
    .box {
      width: 21rem;
    }
    .nav-f {
      position: sticky;
      top: 0;
      .nav {
        width: 5.8rem;
        &.active {
          background-color: #db9e3f;
          color: #fff;
        }
      }
    }
  }
  .describe {
    span {
      margin: 0 0.5rem;
    }
    span:nth-child(1) {
      margin: 0;
    }
  }
  .h {
    height: 13.5rem;
  }
  .pagination-home {
    padding-right: 1rem;
    text-align: right !important;
    .swiper-pagination-bullet {
      background: #fff;
      border-radius: 0.1538rem;
      &.swiper-pagination-bullet-active {
        background-color: #4b67af;
      }
    }
  }
  .video {
    .bottom-border {
      border-bottom: 0.0625rem solid #d4d9de;
    }
    .v-body {
      .title {
        line-height: 2.6rem;
        width: 22.5rem;
      }
      .img {
        width: 9.375rem;
      }
    }
    .packup {
      height: 12.2rem;
      overflow: hidden;
    }
  }
  .video1 {
    .img {
      width: 13rem;
    }
    .title {
      width: 12.6923rem;
       overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon {
      font-size: 0.9231rem;
    }
  }
  .strategy {
    border-bottom: 0.0769rem solid #d4d9de;
    .img {
      width: 10rem;
    }
  }
  .avatar {
    position: relative;
    border: 0.15rem solid #fff;
    img {
      width: 2.8rem;
      display: block;
      font-size: 0;
    }  
    .span {
      height: 0.9rem;
      width: 95%;
      background-color: rgba(0,0,0,.5);
      border-radius: 0 0 0.1875rem 0.1875rem;
      color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &.active {
      border-color:#db9e3f;
      border-radius: 0.2rem;
    }
  }
  .unfold {
    border: 0.0625rem solid #999;
    border-radius: 0.25rem;
    height: 2.8rem;
  }
</style>